import styles from "./index.module.scss";
import Model1 from "./model1";
import Model2 from "./model2";
import Model3 from "./model3";
import Model4 from "./model4";
import Model5 from "./model5";
import Model6 from "./model6";
import { useEffect } from "react";
import { useSelector } from "react-redux";

export default function LayersLevel() {
  const layers = useSelector((state) => {
    return state.layersLevel2;
  });

  const com = [
    {
      name: "model1",
      component: Model1,
      title: "借款未冲销金额",
    },
    {
      name: "model2",
      component: Model2,
      title: "项目配置详情",
    },
    {
      name: "model3",
      component: Model3,
      title: "车辆成本详情",
    },
    {
      name: "model4",
      component: Model4,
      title: "人员详情",
    },
    {
      name: "model5",
      component: Model5,
      title: "社保详情",
    },
    {
      name: "model6",
      component: Model6,
      title: "普查任务详情",
    },
  ];

  const renderModel = () => {
    let Model = null;
    let name = "";
    for (let i = 0; i < com.length; i++) {
      if (layers.name === com[i].name) {
        Model = com[i].component;
        name = com[i].title;
      }
    }
    if (Model) {
      return (
        <div className={styles.mask}>
          <Model name={name} />
        </div>
      );
    } else {
      return null;
    }
  };

  return <>{renderModel()}</>;
}
